<template>
  <div>
    <div class="h60">
      <span class="exe_title">{{ Num }}.{{ item.title }}</span>
      <span class="tags">
        <el-tag class="jj-bg" v-if="item.isJt == 1">机经</el-tag>
        <el-tag class="yc">预测</el-tag>
        <el-tag class="ttNum">{{ item.titleNumber }}</el-tag>
      </span>
    </div>

    <!-- 阅读型的MCM -->
    <!-- 录音播放区域 -->
    <div class="h107" v-if="item.content">
      {{ item.content }}
    </div>

    <!-- 听力型MCM -->
    <!-- 录音播放区域 -->
    <div class="player" v-if="item.url">
      <Audioplayer
        
        :url="item.url"
        :readyTime="readyTime"
      ></Audioplayer>

    </div>
      <h1 v-if="item.url==''" class="none_audio_tip">此题暂未上传录音</h1>

    <!-- 多项选择 -->
    <div class="multiple">
      <div class="descb">{{ item.describe }}</div>
      <el-form>
        <el-checkbox-group v-model="checkedList" size="medium">
          <el-checkbox
            v-for="(item, index) in checkList"
            :key="index"
            :label="index + 1"
            @change="getCheckedVal"
          >
            <span ref="options">{{ item }}</span>
          </el-checkbox>
        </el-checkbox-group>
      </el-form>
    </div>
    <div class="time">
      <span>答题时间：{{ s_to_hs(answerTime) }}</span>
    </div>
  </div>
</template>

<script>
import Audioplayer from '../../player'
import readingUtil from "@/utils/readingUtil";
export default {
  mixins: [readingUtil],
  props: ['item', 'Num'],
  components: {
    Audioplayer,
  },
  data () {
    return {
      answerTime: 0,
      checkList: [],
      checkedList: [], // 选中列表
      readyTime:0
    }
  },
  created () {
    this.checkList = this.item.option.split('&@#')
    setInterval(() => {
      this.answerTime++
    }, 1000);

    console.log(this.item.answer.split(','));
    // 回显已提交的答案
    this.item.answer.split(',').forEach(element => {
      this.checkedList.push(element-0)
    });
  },
  methods: {
    getCheckedVal () {
      this.$emit('sendAnswer', this.checkedList.sort().join())
    }
  },

}
</script>

<style lang="less" scoped>
.none_audio_tip{
  font-size: 1.25rem;
  color: #999;
  padding: 1.125rem;
}
.player {
  margin-bottom: 1rem;
  border: 1px dashed #ff5e4e;
  background-color: #fffafa;
}
.descb {
  padding-left: 1.125rem;
  font-size: 1.2rem;
  font-weight: bold;
  color: #333;
}
.time {
  font-size: 1rem;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #333333;
  position: relative;
  margin-top: 1.875rem;
  span {
    margin-right: 1.875rem;
  }
  .iconfont {
    font-size: 1.5rem;
    color: #ccc;
  }
  .end {
    position: absolute;
    right: -1.5rem;
    text-align: right;
  }
}
// 多选
.multiple {
  .el-checkbox {
    margin-top: 1.875rem;
    display: block !important;
    margin-left: 1.125rem;
  }
  /deep/.el-checkbox__input.is-checked + .el-checkbox__label {
    color: #666;
  }
  /deep/.el-checkbox__input.is-checked .el-checkbox__inner,
  .el-checkbox__input.is-indeterminate .el-checkbox__inner {
    background-color: #ff5e4e;
    border-color: #ff5e4e;
  }
}
.h107 {
  margin: 3.125rem 0 1.5625rem;
  width: 100%;
  background: #fffafa;
  border:1px dashed #ff5e4e;
  border-bottom:1px dashed #ff5e4e !important;
  box-sizing: border-box;
  padding: 1.25rem 1.75rem 1.6875rem;
  box-sizing: border-box;
  font-size: 1.125rem;
  color: #666;
  line-height: 2rem;
}
.h60 {
  height: 3.75rem;
  line-height: 3.75rem;
  background-color: #f7f7f7;
  margin-top: 1.875rem;
  display: flex;
  margin-bottom: 1rem;
  .label {
    height: 100%;
  }
  .tags {
    width: 36.625rem;
  }
  .exe_title {
    width: 90rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #333;
    font-size: 1rem;
    padding-left: 1.25rem;
  }
  .el-tag {
    height: 1.575rem;
    line-height: 1.575rem;
    margin-right: 0.9375rem;
    color: #fff;
    padding: 0 0.375rem;
    border: none;
  }

  .ttNum {
    background-color: #94d0f7;
  }
  .jj-bg {
    background: #ff9b4f;
  }
  .yc {
    background-color: #00cccc;
  }
}
</style>